<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view class="page_box" :style="{ paddingTop: safeAreaInsets?.top + 'px', height: height }">
    <view class="_page" :style="props.tabBar ? 'padding-top: 90rpx;' : ''">
      <view v-if="props.tabBarProps.show" class="tabbar">
        <wd-navbar fixed :title="props.tabBarProps.title" :bordered="false" safeAreaInsetTop>
          <template #left>
            <wd-icon
              v-if="props.tabBarProps.showLeft"
              name="thin-arrow-left"
              size="22px"
              color="white"
              @click="goBack"
            ></wd-icon>
          </template>
        </wd-navbar>
      </view>
      <view v-else-if="props.tabBar" class="tabbar" :style="'height:' + props.tabBarHeight">
        <slot name="tabBar"></slot>
      </view>
      <slot name="inner"></slot>
    </view>
  </view>
</template>
<script lang="ts" setup name="th-page-box">
import { useSetting } from '@/stores/setting';

const setting = useSetting();

const props = defineProps({
  tabBar: {
    type: Boolean,
    default: true,
  },
  tabBarProps: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: '页面',
        showLeft: true,
      };
    },
  },
  tabBarHeight: {
    type: String,
    default: '100rpx',
  },
});

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const height = `calc(100vh - (${safeAreaInsets?.top || 0}px)`;

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
.page_box {
  background-color: #f8f8f8;
}
._page {
  height: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
}
.tabbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
}
</style>
